<template>
  <div class="oneBox">
    <div class="scoreBox">
      <svg-icon
          v-if="score >= 80 && store.resultType !== 1"
          :name="'icon-crown'"
      ></svg-icon>
      <div class="score" :class="classObject">
        <div class="white_border">
<!--          智能质检 ｜ 人工质检-->
          <template v-if="store.resultType !== 1">
            <span class="score_c" :class="score > 99 ? 'score_c_3' : 'score_c_2'">{{ score < 0 ? 0 : score }}</span>
            <svg-icon
                :name="hundredScore"
            ></svg-icon>
          </template>
<!--          标签质检不做分数限制单独处理-->
          <template v-else>
            <span class="score_c"
                  :class="score > 99 ? score > 999 ? 'score_c_4' : 'score_c_3' : 'score_c_2'"
            >
              {{ score < 0 ? 0 : score }}
            </span>
            <span class="c_allScore"  :class="labelAllScore > 99 ? 'c_allScore4' : 'c_allScore3'">
              {{ labelAllScore }}
            </span>
          </template>
        </div>
      </div>
      <div class="mind_text">
        <span class="left_l"></span>
        <span class="text">手动评分会覆盖评分纠正的结果</span>
        <span class="right_l"></span>
      </div>
    </div>
    <div class="itemScoreBox">
      <div class="checkedItem" v-for="(item, index) in itemState.data">
        <div class="title">
          <span class="line"></span>
          <span class="name_t">{{ item.name }}</span>
<!--          <span class="num_t">({{ item.score}}/{{ item.allScore }})</span>-->
          <span class="num_t">({{ item.score > item.allScore ? item.allScore : item.score}}/{{ item.allScore }})</span>
        </div>
        <div class="bodyItem">
          <div class="item" v-for="child in item.childrens">
            <div class="left_c" :class="child.score === 0 ? 'left_c_color': ''">
              <span>{{ child.name }}</span>
              <span v-show="child.fatal !== 1">({{ child.allScore }} 分)</span>
              <span v-show="child.fatal === 1">[致命]</span>
            </div>
            <div class="right_c">
<!--              非致命项-->
              <template v-if="child.fatal !== 1">
                <t-checkbox
                    @change="handleChecked(child, index)"
                    :checked="(child.score === child.allScore)"
                    :disabled="store.templateStatus === 1"
                >
                  满分
                </t-checkbox>
                <t-input-number
                    :class="child.score === 0 ? 'red' : ''"
                    v-model="child.score" theme="normal"
                    :disabled="store.templateStatus === 1"
                    @focus="onFocus(child)"
                    @blur="onBlur(child, index)"
                    @keyup="handleChange(child)"
                ></t-input-number>
              </template>
<!--              致命项-->
              <template v-else>
                <t-checkbox
                    @change="handleChecked(child, index)"
                    :checked="(child.score !== child.allScore)"
                    style="margin-right: 70px"
                >
                  命中
                </t-checkbox>
<!--                <t-input-number-->
<!--                    v-show="child.fatal !== 1"-->
<!--                    :class="child.score === 0 ? 'red' : ''"-->
<!--                    v-model="child.score" theme="normal"-->
<!--                    @focus="onFocus(child)"-->
<!--                    @blur="onBlur(child, index)"-->
<!--                    @keyup="handleChange(child)"-->
<!--                ></t-input-number>-->
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="checkedItem">
        <div class="title">
          <span class="line"></span>
          <span class="name_t">评语和建议</span>
        </div>
        <div class='textarea'>
          <t-textarea
              placeholder="请输入评语和建议........"
              name="description"
              :autosize="{ minRows: 3, maxRows: 3 }"
              :maxcharacter="150"
              v-model="suggestions"
              :disabled="store.templateStatus === 1"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, reactive, inject, toRaw, onUnmounted, watch} from 'vue'
import { usePageStore } from '@/pinia/page.js'
import {getTemplateScore} from "../../../../api/qualitySet/qualityTemplate";
const store = usePageStore()

const detailData  = inject('templateScore') // 导入
const suggestions  = inject('suggestions') // 导入

const score = ref(0) // 得分
const hundredScore = ref('') // 总分 svg-icon
const classObject = computed(() => {
  if(store.resultType === 1) {
    return 'styleOne'
  }
  if(score.value >= 80) {
    hundredScore.value = 'icon-hundredOne'
    return 'styleOne'
  } else if(score.value < 80 && score.value >= 60 ) {
    hundredScore.value = 'icon-hundredTwo'
    return 'styleTwo'
  } else if(score.value < 60) {
    hundredScore.value = 'icon-hundredThree'
    return 'styleThree'
  }
})

const itemState = reactive({
  data: [],
  score: 0
})

const scoreData = toRaw(detailData.value)
score.value = scoreData['score']
store.$patch({ calculateScore: score.value })
itemState.data = scoreData['childrens']

const originalDotNumber = ref(0) // 质检点初始值
// 获取总分（标签质检的情况下总分不固定）
const labelAllScore = ref() // 标签质检总分
getTemplateScore(itemState.data[0].templateId).then(res => {
  labelAllScore.value = JSON.parse(JSON.stringify(res.data))
})

// 限制输入超过最大值
const handleChange = (obj) => {
  if(obj.score < 0) {
    obj.score = undefined
  }
  if(obj.score > obj.allScore) {
    obj.score = obj.allScore
  }
};
const onFocus = (e) => {
  originalDotNumber.value = JSON.parse(JSON.stringify(e.score))
  if(e.score === 0) {
    e.score = undefined
  }
}
const onBlur = (e, pIndex) => {
  if(e.score === undefined) {
    e.score = 0
  }
  let num = e.score - originalDotNumber.value // 输入加减分
  score.value = score.value + num
  store.$patch({ calculateScore: score.value })
  itemState.data[pIndex].score = itemState.data[pIndex].score + num
}
// 满分checkbook事件
const handleChecked = (obj, pIndex) => {
  originalDotNumber.value = JSON.parse(JSON.stringify(obj.score))
  if(obj.score < obj.allScore) {
    obj.score = obj.allScore
    // obj.checked = true
  }  else {
    obj.score = 0
  }
  let num = obj.score - originalDotNumber.value // 输入加减分
  score.value = score.value + num
  store.$patch({ calculateScore: score.value })
  itemState.data[pIndex].score = itemState.data[pIndex].score + num
}


</script>

<style lang="scss" scoped>
.oneBox {
  height: 100%;
  .scoreBox {
    position: relative;
    height: 168px;
    overflow: hidden;
    .svg-icon {
      position: absolute;
      height: 53px;
      width: 53px;
      left: 50%;
      transform: translateX(-50%);
      top: -6px;
    }
    .score {
      position: relative;
      height: 94px;
      width: 94px;
      margin: 33px auto 0 auto;
      opacity: 1;
      border-radius: 240px;

      .score_c {
        position: absolute;
        font-weight: 500;
        left: calc(50% - 7px);

        transform: translateX(calc(-50% - 7px));
      }
      .score_c_2 {
        font-size: 48px;
        top: 12px;
      }
      .score_c_3 {
        font-size: 36px;
        top: 24px;
      }
      .score_c_4 {
        font-size: 24px;
        top: 30px;
      }
      .svg-icon {
        position: absolute;
        left: 73px;
        top: 52px;
        height: 8.9px;
        width: 18.3px;
      }
      .c_allScore {
        position: absolute;
        right: 8px;
        bottom: 16px;
        color: rgba(30, 117, 254, 1);
      }
      .c_allScore3 {
        bottom: 22px !important;
      }
      .c_allScore4 {
        bottom: 15px !important;
      }
    }
    .styleOne {
      border: 2px solid rgba(145, 187, 255, 1);
      background: linear-gradient(90deg, rgba(209, 232, 254, 1) 0%, rgba(255, 255, 255, 1) 44.36%, rgba(239, 247, 255, 1) 76.87%, rgba(212, 234, 254, 1) 99.91%);
      box-shadow: 0 2px 9px 2px rgba(215, 229, 254, 1);
      .score_c {
        color: rgba(30, 117, 254, 1);
      }
    }
    .styleTwo {
      border: 2px solid rgba(255, 163, 71, 1);
      background: linear-gradient(90deg, rgba(255, 230, 209, 1) 0%, rgba(255, 255, 255, 1) 44.39%, rgba(255, 249, 240, 1) 76.99%, rgba(255, 228, 224, 1) 100%);
      box-shadow: 0 2px 9px 2px rgba(255, 239, 217, 1);
      .score_c {
        color: rgba(255, 123, 0, 1);
      }
    }
    .styleThree {
      border: 2px solid rgba(255, 145, 145, 1);
      background: linear-gradient(90deg, rgba(255, 220, 209, 1) 0%, rgba(255, 255, 255, 1) 44.36%, rgba(255, 244, 240, 1) 76.96%, rgba(255, 212, 212, 1) 99.82%);
      box-shadow: 0 2px 9px 2px rgba(255, 217, 217, 1);
      .score_c {
        color: rgba(240, 86, 86, 1);
      }
    }
    .white_border {
      margin: auto;
      height: 100%;
      width: 100%;
      border: 3px solid white;
      border-radius: 50%;
    }
    .mind_text {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        display: inline-block;
      }
      .left_l {
        width: 28px;
        height: 1px;
        opacity: 1;
        border-radius: 103px 0 0 295px;
        background: linear-gradient(270deg, rgba(204, 204, 204, 1) 0%, rgba(204, 204, 204, 0) 100%);
      }
      .text {
        font-size: 10px;
        font-weight: 400;
        color: rgba(117, 117, 117, 1);
        padding: 0 10px;
      }
      .right_l {
        width: 28px;
        height: 1px;
        opacity: 1;
        border-radius: 103px 0 0 295px;
        background: linear-gradient(90deg, rgba(204, 204, 204, 1) 0%, rgba(204, 204, 204, 0) 100%);
      }
    }
  }
  .itemScoreBox {
    height: calc(100vh - 568px);
    overflow-y: auto;
    .checkedItem {
      .title {
        height: 21px;
        width: 100%;
        border-radius: 2px;
        background: rgba(250, 250, 250, 1);
        display: flex;
        align-items: center;
        .line {
          display: inline-block;
          margin: 0 9px 0 8px;
          width: 2px;
          height: 11px;
          opacity: 1;
          border-radius: 249px;
          transform: rotate(181.81deg);
          background: rgba(30, 117, 254, 1);
        }
        .name_t {
          display: inline-block;
          font-size: 11px;
          font-weight: 600;
          color: rgba(56, 56, 56, 1);
          margin-right: 8px;
        }
        .num_t {
          font-size: 11px;
          font-weight: 400;
          color: rgba(56, 56, 56, 1);
        }
      }
      .bodyItem {
        .item {
          height: 30px;
          box-sizing: border-box;
          padding: 4px 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          .left_c {
            flex: 1;
            font-size: 11px;
            font-weight: 400;
            span:nth-child(1) {
              color: rgba(56, 56, 56, 1);
            }
            span:nth-child(2) {
              color: rgba(129, 129, 129, 1);
            }
            span:nth-child(3) {
              color: rgba(56, 56, 56, 1);
            }
          }
          .left_c_color {
            text-decoration-line: underline;
            span {
              color: rgba(30, 117, 254, 1) !important;
            }
          }
          .right_c {
            margin-left: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            :deep(.t-checkbox) {
              .t-checkbox__label {
                font-size: 11px;
                font-weight: 400;
                color: rgba(56, 56, 56, 1);
                margin-left: 5px;
              }
            }
            :deep(.t-input-number) {
              //height: 28px;
              margin-left: 8px;
              box-sizing: border-box;
              width: 62px;
              .t-input__wrap {
                height: 22px;
                .t-input {
                  border-radius: 3px;
                  height: 22px;
                  border: 1px solid rgba(217, 217, 217, 1);
                }
              }
            }
            .red {
              :deep(.t-input__inner) {
                color: rgba(227, 60, 100, 1);
              }
            }
          }
        }
        .item:nth-child(1) {
          margin-top: 7px;
        }
        .item:last-child {
          margin-bottom: 9px;
        }
      }
    }
    .textarea {
      padding: 8px 0 16px 0;
      position: relative;
      :deep(.t-textarea) {
        .t-textarea__inner {
          height: 82px !important;
          min-height: 82px !important;
          font-size: 11px;
          line-height: 16.8px;
        }
      }
      :deep(.t-textarea__info_wrapper) {
        position: absolute;
        bottom: 8px;
        right: 8px;
        .t-textarea__limit {
          font-size: 11px;
          font-weight: 400;
          color: rgba(12, 13, 14, 1);
        }
      }
    }
  }
}
</style>
